<template>
    <div class="main-container" h-full w-full @click="mainClick" >
        <sideBar/>
        <setDrawer/>
        <appMain/>
    </div>
</template>

<script setup lang="ts">
import sideBar from '@/components/sidebar/index.vue'
import setDrawer from '@/components/set/index.vue'
import appMain from '@/components/main/index.vue'
import { useGlobalStore } from '@/store/module/global'
import { onMounted } from 'vue';

const globalStore = useGlobalStore()
const sideBarStyles = computed(() => globalStore.sidebar)

const appDom = document.querySelector('html')
const setCommonStyles = () => {
    //通用的样式，自定义样式
    const Styles = {
        sideBarWidth: sideBarStyles.value.width + 'px',
        sideBarOpacity: sideBarStyles.value.sideBarOpacity.toString(),
        sideBarTranslate: -sideBarStyles.value.width + 'px',
        iconSize: sideBarStyles.value.iconSize + 'px',
        iconGapX: sideBarStyles.value.iconGap + 'px',
        iconGapY: sideBarStyles.value.iconGap + 'px',
        iconRadius: sideBarStyles.value.iconRadius + 'px',
        timeSize: sideBarStyles.value.timeSize + 'px',
        appGridWidth:sideBarStyles.value.appGridWidth + 'px',
        appOpacity:sideBarStyles.value.appOpacity.toString(),
        appFontSize:sideBarStyles.value.appFontSize + 'px',
        appFontColor:sideBarStyles.value.appFontColor
    }
    //样式别名映射
    const commonStyles = {
        '--sideBarWidth': Styles.sideBarWidth,
        '--sideBarOpacity': Styles.sideBarOpacity,
        '--sideBarTranslate':Styles.sideBarTranslate,
        '--iconSize':Styles.iconSize,
        '--icon-gap-x':Styles.iconGapX,
        '--icon-gap-y': Styles.iconGapY,
        '--iconRadius':Styles.iconRadius,
        '--timeSize':Styles.timeSize,
        '--appGridWidth':Styles.appGridWidth,
        '--appOpacity':Styles.appOpacity,
        '--appFontSize':Styles.appFontSize,
        '--appFontColor':Styles.appFontColor
    }
    //设置样式
    Object.entries(commonStyles).forEach(([key, value]) => {
        appDom?.style.setProperty(key, value)
    })
}

watch(sideBarStyles.value,() => {
    setCommonStyles()
})

const mainClick = () => {
    if(globalStore.batchEditFlag){
        globalStore.setBatchEditFlag(false)
    }
}

const observeHTML = () => {
    const observe = new ResizeObserver(entries => {
        if(entries[0].target.clientWidth < 580){
            globalStore.setMobile(true)
            return
        }
       globalStore.setMobile(false)
    })
    observe.observe(appDom as Element)
}

//切换主题
const dark = computed(() => globalStore.dark)
watch(dark,() => {
    dark.value?appDom?.classList.add('dark'):appDom?.classList.remove('dark')
})

onMounted(() => {
    setCommonStyles()
    observeHTML()
})
</script>

<style scoped lang="scss">
.main-container{
    background-image: url('@/assets/images/login.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
</style>